import Vue from 'vue'
import VueRouter from 'vue-router'

// import Home from '../Home.vue'
import Mine from '../Mine.vue'
import About from '../About.vue'
// import Xue from "../xue.vue"
import S from "../404.vue"
// import Boxiong from "../Boxiong.vue"
// import Binshi from "../Binshi.vue"
// import Shibin from "../Shibin.vue"

// let home = () => {
//   return import('../Home.vue')
// }

Vue.use(VueRouter)

const routes = [
  // {
  //   path: '/', //路径 首字母小写
  //   name: 'Home',
  //   component: Home,
  //   props: (route) => {
  //     return { gender: route.params.gender, age: 100, query: route.query.search }
  //   },
  //   meta: {
  //     isActive: true
  //   },

  //   // alias:"/xiaoming" //小名 相当于设置另一个路径 都和path可用

  //   // redirect:"About" //重定向
  //   // redirect:{
  //   //   // name:About,
  //   //   // path:"/about"
  //   // }
  //   // redirect:(to)=>{
  //   //   console.log(to); //to是当前路由
  //   //   return "About"  //重定向的目标路由
  //   // }
  // },
  // {
  //   path: '/about/:name',//路径 首字母小写
  //   component: About,
  //   name: "About",
  //   children: [
  //     {
  //       path: "",
  //       component: Boxiong
  //     },
  //     {
  //       path: "binshi",
  //       component: Binshi
  //     },
  //     {
  //       path: "shibin",
  //       component: Shibin
  //     }
  //   ]
  // },
  // {
  //   path: '/mine',
  //   // components: {  //命名视图
  //   //   default: Mine,
  //   //   a: Home,
  //   //   B: About
  //   // },
  //   // props: {
  //   //   default: true, //设置为true 命名视图里就能解耦
  //   //   // gender:"nan"
  //   // },
  //   component: Mine,
  //   name: "Mine"
  // }, {
  //   path: '/xue/:a/a/:b',
  //   component: Xue,
  //   name: "Xue"
  // },
  {
    path: "/",
    name: "Home",
    component: () => import("../Home.vue")
  },
  {
    path: "/about",
    name: "About",
    component: () => import("../About.vue")
    // 路由独享的守卫
    // beforeEnter: (to, from, next) => {
    //   console.log(to); 
    //   console.log(from); 
    //   console.log(next);
    //   next()
    // }
  },
  {
    path: "/mine/:age",
    name: "Mine",
    component: () => import("../Mine.vue"),
    meta: {
      isActive: true
    }
  },
  {
    // path: '/USER-*', //加上User 重复引入组件不会触发
    path: '/*', //路径 首字母小写
    // name: 'Home',
    component: S
  },
  // 用到动态路由参数 必须保证 router 
  // 里的片段数量和APP的片段是对等的 且必须大于等于2个
]

const router = new VueRouter({
  mode: "history", //默认值是hash模式 hash模式不利于搜索引擎(后台的)
  //  history 默认在路径干净 没有#号
  routes
})

// 导航守卫 用来保护
//路由守卫  只要是守卫必须调用next()方法
//进入路由之前调用的函数  (全局前置守卫)
router.beforeEach((to, from, next) => {
  // console.log(to); //要进入的路由 (现任)
  // console.log(from); //要离开的路由 (前任)
  // console.log(next());//只有调用这个方法 次啊能进入下一个路由 (决定要不要进入目标路由)
  // next(false)   //中断进入目标路由 (component不确定 所以进不去)
  if (to.meta.isActive) {
    next({ name: "About" })
  } else {

    next()
  }
})
// 全局解析首卫
// 异步解析路由之后
router.beforeResolve((to, from, next) => {
  // console.log(to); 
  // console.log(from); 
  // console.log(next());
  // next(false)   
  next()
})
//全局后置钩子
router.afterEach((to, from) => {
  // console.log(to);
  // console.log(from);
  // next()
})

export default router
